<template>
  <page class="app-container">
    <!-- 过滤条件 begin-->
    <el-form :inline="true" class="filter-container">
      <el-form-item>
        <router-link :to="{name: 'shopListAdd'}">
          <el-button type="primary">添加门店</el-button>
        </router-link>
      </el-form-item>
    </el-form>
    <!-- 过滤条件 end-->

    <!-- 表格 begin-->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="门店id"></el-table-column>

      <el-table-column prop="name" label="门店图片">
        <template slot-scope="scope">
          <m-img :src="scope.row.image" style="width: 100px"></m-img>
        </template>
      </el-table-column>

      <el-table-column prop="shopName" label="门店名称"></el-table-column>

      <el-table-column prop="phone" label="联系电话"></el-table-column>

      <el-table-column prop="address" label="地址"></el-table-column>

      <el-table-column prop="gunNumber" label="抢号数量"></el-table-column>

      <el-table-column align="center" prop="shopName" label="操作">
        <template slot-scope="scope">
          <router-link :to="{name: 'shopListEdit', params: {id: scope.row.id}}">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
          </router-link>
          <el-button icon="el-icon-delete" size="mini" style="color: #f5222d" @click="onDel(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 end-->

    <!--分页 begin-->
    <div class="pagination-container mt20">
      <el-pagination background @current-change="onPageChange" :current-page="searchForm.page" :page-size="limit"
                     layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--分页 begin-->
  </page>
</template>

<script>
  import {confirm_handler} from '@/utils/feedback'

  export default {
    name: 'shopList',
    data() {
      return {
        list: [],
        total: 0,
        limit: 0,
        listLoading: true,
        searchForm: {
          page: 1
        },
        dialogShow: false,
        dataForm: {}
      }
    },
    activated() {
      this.getList()
    },
    methods: {
      async pitsPullData() {
        let {total, list, limit} = await this.$get_list('admin/shop/getShopListByCompanyId', this.searchForm)
        list = list.map(({gunNumber, shop}) => ({gunNumber, ...shop}))
        return {total, list, limit}
      },

      // 获取列表
      async getList() {
        //this.listLoading = true
        let {total, list, limit} = await this.pitsPullData()
        Object.assign(this, {total, list, limit})
      },

      // 搜索过滤
      onSearch() {
        this.searchForm.page = 1
        this.getList()
      },

      // 分页
      onPageChange(val) {
        this.searchForm.page = val
        this.getList()
      },
      onDel(shopId) {
        confirm_handler({
          ajax: () => this.$post('admin/shop/delteShopById', {shopId}),
          title: '确认删除门店?',
          hint: '删除门店后，门店相关数据不能恢复!',
          type: 'warning'
        }).then(x => {
          this.getList()
          $g.shopListAsync(true)
        })
      }
    }
  }
</script>
